<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { useBreadcrumb } from '@/composables/useBreadcrumb'
import SideBar from '@/components/SideBar.vue'

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const userStore = useUserStore()
const { breadcrumbItems } = useBreadcrumb()

// 侧边栏折叠状态
const collapsed = computed(() => appStore.sidebarCollapsed)

// 处理菜单点击
const handleMenuClick = (item) => {
  router.push(item.path)
}

// 切换侧边栏折叠状态
const toggleSidebar = () => {
  appStore.toggleSidebar()
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

// 切换主题
const toggleTheme = () => {
  appStore.toggleTheme()
}
</script>

<template>
  <t-layout class="layout">
    <!-- 侧边栏组件 -->
    <SideBar 
      :collapsed="collapsed" 
      @menu-click="handleMenuClick"
    />
    
    <!-- 内容区域 -->
    <t-layout class="main-layout">
      <!-- 顶部导航 -->
      <t-header class="layout-header">
        <div class="header-left">
          <t-button variant="text" shape="square" @click="toggleSidebar" class="sidebar-toggle">
            <t-icon name="menu-fold" v-if="!collapsed" />
            <t-icon name="menu-unfold" v-else />
          </t-button>
          
          <!-- 面包屑 -->
          <t-breadcrumb class="breadcrumb">
            <t-breadcrumb-item to="/">首页</t-breadcrumb-item>
            <t-breadcrumb-item 
              v-for="(item, index) in breadcrumbItems" 
              :key="index"
              :to="item.path"
              :class="{ 'current': index === breadcrumbItems.length - 1 }"
            >
              {{ item.title }}
            </t-breadcrumb-item>
          </t-breadcrumb>
        </div>
        
        <div class="header-right">
          <!-- 系统标题 -->
          <span class="system-title">贵州四季康养管理系统</span>
          
          <!-- 主题切换 -->
          <t-button variant="text" shape="square" @click="toggleTheme" class="action-btn">
            <t-icon name="mode" />
          </t-button>
          
          <!-- 用户菜单 -->
          <t-dropdown trigger="click" class="user-dropdown">
            <t-button variant="text" class="user-btn">
              <t-avatar size="small" class="user-avatar">{{ userStore.userName.substring(0, 1) }}</t-avatar>
              <span class="username">{{ userStore.userName }}</span>
              <t-icon name="chevron-down" />
            </t-button>
            <template #dropdown>
              <t-dropdown-menu>
                <t-dropdown-item @click="() => router.push('/profile')">
                  <t-icon name="user-circle" />个人中心
                </t-dropdown-item>
                <t-dropdown-item @click="() => router.push('/account/settings')">
                  <t-icon name="setting" />账号设置
                </t-dropdown-item>
                <t-dropdown-item @click="handleLogout">
                  <t-icon name="logout" />退出登录
                </t-dropdown-item>
              </t-dropdown-menu>
            </template>
          </t-dropdown>
        </div>
      </t-header>
      
      <!-- 主要内容 -->
      <t-content class="layout-content">
        <router-view />
      </t-content>
      
      <!-- 页脚 -->
      <t-footer class="layout-footer">
        贵州四季康养管理系统 &copy; 2025
      </t-footer>
    </t-layout>
  </t-layout>
</template>

<style scoped>
.layout {
  height: 100vh;
  width: 100%;
  display: flex;
}



.main-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.layout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-toggle {
  color: #606266;
}

.breadcrumb {
  font-size: 14px;
}

.breadcrumb :deep(.t-breadcrumb-item) {
  color: #606266;
}

.breadcrumb :deep(.t-breadcrumb-item:hover) {
  color: #409eff;
}

.breadcrumb :deep(.t-breadcrumb-item.current) {
  color: #303133;
  font-weight: 500;
}

.breadcrumb :deep(.t-breadcrumb-item.current .t-breadcrumb__inner) {
  cursor: default;
}

.system-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-right: 24px;
}

.action-btn {
  color: #606266;
  transition: color 0.3s;
}

.action-btn:hover {
  color: #409eff;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.user-btn:hover {
  background-color: #f5f7fa;
}

.user-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.layout-content {
  padding: 24px;
  background-color: #ffffff;
  flex: 1;
  overflow-y: auto;
  margin: 0;
  border-left: 1px solid #001529;
}



.layout-footer {
  text-align: center;
  padding: 20px 24px;
  color: #909399;
  font-size: 14px;
  background-color: #ffffff;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #001529;
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-header {
    padding: 0 16px;
  }
  
  .system-title {
    display: none;
  }
  
  .layout-content {
    padding: 16px;
    border-left: 1px solid #001529;
  }
  
  .layout-footer {
    padding: 16px;
  }
}
</style> 